<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="user" value="${sessionScope.user}" />
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html>

<head>
    <title>个人主页</title>
    <!--JS files-->
    <%--<script src="${path}/pet/home/js/jquery.min.js"></script>--%>
    <%--<script src="${path}/pet/user/js/bootstrap.min.js"></script>--%>
</head>

<body>
<div class="row">
    <div class="ucenter">
        <div class="ucenter-info mt10">
            <div class="info-title">
                <h5>我的个人主页</h5>
            </div>
            <div class="info">
                <ul class="info-img">
                    <li>
                        <%--<a href="${path}/changeImg" id="change-img">--%>
                        <a href="${path}/changeImg">
                            <img src="${path}/avatar/${user.headUrl}" class="avatar" />
                        </a>
                    </li>
                </ul>
                <div class="info-main">
                    <div class="row">
                        <%--用户名展示--%>
                        <div id="user_info1"></div>
                        <a><button class="BUTTON" id="modify-info">修改资料</button></a>
                        <button class="BUTTON" id="dropout" style="height: 30px;margin-left: 8%;">注销账户</button>
                        <button class="BUTTON" id="cancel_user" style="height: 30px;margin-left: 5%;">退出账户</button>
                        <button class="BUTTON" id="change-pwd" style="height: 30px;margin-left: 5%;">修改密码</button>
                    </div>
                    <%--用户信息展示--%>
                    <div id="user_info2"></div>
                    <div id="user_info3"></div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改资料部分--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 10%;border: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改资料</h4>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="userID">用户ID</label>
                        <input type="text" class="form-control" disabled="" id="userID" value="${user.id}">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12" id="all">
                        <label for="username1">用户名</label>
                        <input type="text" class="form-control" id="username1" value="${user.username}">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="phone">手机号码</label>
                        <input type="text" autocomplete="off" class="form-control" name="phone" id="phone" value="${user.phone}">
                        <div id="phone1" style="color: #FD3F31;display: none;">请输入手机号码</div>
                        <div id="phone2" style="color: #FD3F31;display: none;">请输入有效的手机号码</div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label>性别</label>
                        <input type="radio" name="sex" id="sex1" value="女性">女
                        <input type="radio" name="sex" id="sex2" value="男性">男
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>
                    <button type="button" id="save" class="btn btn-primary BUTTON" data-dismiss="modal" style="float: right;">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改密码部分--%>
<div class="modal fade" id="c_password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 10%;border: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改密码</h4>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="username2">用户名</label>
                        <input type="text" class="form-control" disabled="" id="username2" value="${user.username}">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="old_password">旧密码</label>
                        <input type="password" autocomplete="off" class="form-control" id="old_password" placeholder="请输入密码">
                        <div id="o_pwd" style="color: #FD3F31;display: none;">密码不能为空</div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="new_password">新密码</label>
                        <input type="password" autocomplete="off" class="form-control" id="new_password" placeholder="请输入密码">
                        <div id="n_pwd" style="color: #FD3F31;display: none;">两次密码一致，请重新输入</div>
                        <div id="n_pwd1" style="color: #FD3F31;display: none;">密码不能为空</div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>
                        <input id="savepwd" type="button" class="btn btn-primary BUTTON" value="保存" style="float: right;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--展示修改资料或修改密码--%>
<div class="modal-dialog" role="document"></div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        var user = "<%=session.getAttribute("user")%>";
        var username = "${user.username}";
        var uid = ${user.id};
        var sex = "${user.sex}";

        //修改资料弹窗
        $("#modify-info").click(function () {
            $('#myModal').modal();
        });

        //修改密码
        $("#change-pwd").click(function() {
            <%--window.location.href = '${path}/changePwd?userID='+ uid +'';--%>
            $('#c_password').modal();
        });

        //失去焦点时，判断是否输入旧密码
        $("#old_password").blur(function(){
            var o_pwd = $.trim($("#old_password").val());
            if(o_pwd.length <= 0) {
                $("#o_pwd").toggle();
            } else {
                $("#o_pwd").hide();
            }
        });

        //失去焦点时，判断是否输入新密码，并判断两次密码是否一致
        $("#new_password").blur(function(){
            var o_pwd = $.trim($("#old_password").val());
            var pwdAgain = $.trim($("#new_password").val());
            if(pwdAgain.length <= 0) {
                $("#n_pwd1").toggle();
                $("#n_pwd").hide();
            } else if(o_pwd == pwdAgain) {
                $("#n_pwd").toggle();
                $("#n_pwd1").hide();
            } else {
                $("#n_pwd").hide();
                $("#n_pwd1").hide();
            }
        });

        //修改密码
        $("#savepwd").click(function() {
            var username = $.trim($("#username2").val());
            var oldPwd = $.trim($("#old_password").val());
            var newPwd = $.trim($("#new_password").val());
            $.ajax({
                type: 'POST',
                url: '/user/changePwd',
                dataType: "json",
                data: {username:username,oldPwd:oldPwd,newPwd:newPwd},
                error: function () {
                    alert("失败");
                },
                success: function (result) {
                    if(result.msg=="密码修改成功"){
                        alert('修改成功！');
                        $('#dashboad').load('${path}/personalInfo');
                    } else if(result.msg=="新旧密码不能为空！"){
                        alert('新旧密码不能为空！');
                    } else if(result.msg=="新密码不能和原密码相同！") {
                        alert('新密码不能和原密码相同！');
                    } else if(result.msg=="密码错误！") {
                        alert('旧密码错误');
                    } else if(result.msg=="密码修改失败") {
                        alert('密码修改失败');
                    }
                }
            });
        });

        //修改资料部分
        if(sex == "男性") {
            $("#sex2").attr("checked","checked");
        } else if(sex == "女性") {
            $("#sex1").attr("checked","checked");
        }

        //验证手机号是否规范
        $("#phone").blur(function() {
            var phone = $.trim($("#phone").val());
            if(phone.length <=0) {
                $("#phone1").toggle();
                $("#phone2").hide();
            } else if(phone.length !=11 ) {
                $("#phone2").toggle();
                $("#phone1").hide();
            }
        });

        //保存修改的信息
        $("#save").click(function() {
            var username = $.trim($("#username1").val());
            var sex = $.trim($("input:radio:checked").val());
            var phone = $("input[name=phone]").val();
            $.ajax({
                type: 'POST',
                url: '/user/updateUser',
                dataType: "json",
                data: {id:uid,username:username,sex:sex,phone:phone},
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    console.log(result);
                    alert("修改成功");
                    $('#dashboad').load('${path}/personalInfo');
                }
            });
        });

        //查询用户的积分
        $.ajax({
            url: "/credit/showCredit",
            type: "post",
            data: {uid:uid},
            dataType: "json",
            async: false,
            success: function(result) {
                var str2 = "";
                str2 += '<div class="row">';
                str2 += '    <label>积分：</label><span class="orange">'+ result.message +'</span>';
                str2 += '</div>';
                $('#user_info3').html(str2);
            }
        });

        //查询用户所有信息
        $.ajax({
            url: "/user/userMessage",
            type: "post",
            data: {username:username},
            dataType: "json",
            async: false,
            success: function(result) {
                console.log(result);
                var str ="";
                var str1 ="";
                var str2 ="";
                str += '<label style="display: inline-block;">用户名：</label>';
                str += '<p style="display: inline-block;">'+ result.username +'</p>';
                str1 += '<div class="row">';
                str1 += '    <label>用户id：</label><p id="uid">'+ result.id +'</p>';
                str1 += '</div>';
//                str1 += '<div class="row">';
//                str1 += '    <label>手机号码：</label>'+ result.phone +'';
//                str1 += '</div>';
                str1 += '<div class="row">';
                str1 += '    <label>角色：</label>'+ result.role +'';
                str1 += '</div>';
                str1 += '<div class="row">';
                str1 += '    <label>性别：</label><span class="orange">'+ result.sex +'</span>';
                str1 += '</div>';
                str1 += '<div class="row">';
                str1 += '    <label>等级：</label><span class="orange">'+ result.level +'</span>';
                str1 += '</div>';
                <%--str2 += '<img src="${path}/avatar/${user.headUrl}" class="avatar" />';--%>
                $('#user_info1').html(str);
                $('#user_info2').html(str1);
//                $('#change-img').html(str2);
            }
        });

        //注销账户
        $("#dropout").click(function() {
            $.ajax({
                type: 'POST',
                url: '/user/logoff',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    console.log(result);
                    if(result.msg == "更新成功"){
                        alert("已注销账户，如有需要，请重新注册");
                    } else {
                        alert("注销失败");
                    }
                }
            });
        });

        //退出账户
        $("#cancel_user").click(function() {
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录")
                    window.location.href = '${path}/home';
                }
            });
        });
    });
</script>
<style>
    body {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #8A8A8A;
        font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif, "宋体";
    }
    .row {
        width: 100%;
    }
    .ucenter {
        width: 780px;
        text-align: left;
    }
    .ucenter-info {
        padding: 10px;
    }
    .ucenter-info .info-title {
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .ucenter .mt10 {
        margin-top: 10px;
    }
    .ucenter .info-title h5 {
        color: #FD9000;
        font-size: 20px;
        margin: 0;
    }
    .ucenter .info-img {
        width: 190px;
        text-align: center;
        float: left;
    }
    .ucenter .info-img li {
        line-height: 22px;
        list-style-type: none;
    }
    .ucenter .info-img li div {
        width: 92px;
        text-align: left;
        margin: 0 auto;
    }
    .ucenter .info-img .ico {
        width: 18px;
        height: 18px;
        position: relative;
        top: 5px;
        margin-right: 5px;
    }
    .ucenter .info-img .avatar {
        width: 132px;
        height: 132px;
    }
    .ucenter .info-main {
        float: left;
        width: 520px;
    }
    .ucenter .info-main .row {
        line-height: 28px;
        width: 520px;
    }
    .ucenter .info-main .row label {
        display: inline-block;
        margin-right: 10px;
        width: 60px;
    }
    .clear {
        clear: both;
    }
    .tab-content>.active {
        display: block;
        height: 500px !important;
    }
    #modify-info {
        color: #8A8A8A;
        width: 100%;
        height: 30px;
        margin-left:30%;
    }
    .BUTTON {
        background: #3D608F;
        color: #FFFFFF !important;
        border: 1px solid #3D608F;
        border-radius: 15px;
    }
</style>

</html>